<template>
  <!-- 售后履历弹框 -->
  <el-dialog title="售后履历" :visible.sync="serviceShow" width="60%" append-to-body :before-close="closeDialog">
    <el-button type="primary" class="fr mb-5" @click="createItem">创建履历</el-button>
    <z-table :list="list" :tableProps="serviceTableProps" :columns="columns">
      <template v-slot:content="v">
        <span v-if="v.key == 'key_part_type'">
          <span @click.stop="goDetail(v.row)" class="icon-class text-blue">
            <svg-icon icon-class="documentation" />
          </span>
        </span>
        <span v-else>{{ v.row[v.key] }}</span>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </el-dialog>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  name: 'serviceList',
  mixins: [commonMixin],
  components: {},
  props: {
    serviceShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      query: {
        page: 1,
        size: 10,
      },
      name: '售后履历',
      serviceTableProps: {
        border: true,
        fixed: false,
        highlightCurrentRow: true,
        hideOperations: true,
      },
      columns: [
        { title: '售后日期', key: 'key_part_no' },
        { title: '售后内容', key: 'key_part_name' },
        { title: '售后结果', key: 'category' },
        { title: '详情查看', key: 'key_part_type' },
      ],
      list: [
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
        },
      ],
      fields: [
        { title: '售后日期', key: 'key_part_no', span: 12, name: 'date' },
        {
          title: '售后结果',
          key: 'key_part_name',
          span: 12,
          name: 'radio',
          options: [
            {
              label: '解决',
              value: 1,
            },
            {
              label: '未解决',
              value: 2,
            },
          ],
        },
        { title: '售后内容', key: 'key_part_type', span: 24, name: 'textarea' },

        {
          title: '图片附件',
          key: 'filelist',
          span: 24,
          name: 'fileUploader',
          tips: '不能大于5M',
          props: {
            action: '',
            // accept: '.jpg,.png,.pdf,',
            limit: 5,
            autoUpload: false,
            multiple: true,
            'on-change': this.uploadOnchange,
            'before-remove': this.beforeRemove,
            'on-preview': this.onPreview,
            'on-exceed': this.handleExceed,
          },
        },
      ],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 关闭弹框
    closeDialog() {
      this.$parent.serviceShow = false
    },
    // 履历详情
    goDetail(v) {
      this.setFieldsDisable(true, ['key_part_no', 'key_part_name', 'key_part_type', 'filelist'])
      this.editItem(v)
    },
    // 上传
    uploadOnchange(file, fileList) {
      let f = file.raw
      const isLt20M = f.size / 1024 / 1024 < 20
      if (!isLt20M) {
        fileList.splice(fileList.indexOf(f), 1)
        return this.$message.error('上传档案大小不能超过 20MB!')
      }
      alert(9)
      this.formData.append('file', f)
    },
    // 清除附件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定要删除${file.name}?`, 提示, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        if (file.FileId) {
          // 已经有附件了,进行删除
          this.removeFiles.push(file.FileId)
        } else {
          this.formData = new FormData()
          // 刚上传没有点确定
          fileList.forEach((i) => {
            if (!i.FileId && i.name != file.name) {
              this.formData.append('file', i.raw)
            }
          })
        }
      })
    },
    // 预览
    onPreview(file) {
      alert('没有接口看个毛')
    },
    // 超过最大上传数
    handleExceed() {
      return this.$message.warning('最多只能上传5张图片')
    },
  },
}
</script>

<style lang="scss" scoped>
.icon-class {
  font-size: 18px;
  cursor: pointer;
}
</style>